<template>
  <div style="width: 100%">
    <el-row :gutter="0">
      <el-col :span="24">
          <el-form label-width="80px" style="width: 500px">
            <el-form-item label="头像" >
              <img :src="user.avatar" width="200">
              &nbsp;&nbsp; <el-button @click="isUpdateCover=true">重新上传</el-button>
            </el-form-item>
            <el-dialog
                v-model="isUpdateCover"
                width="500px"
                :before-close="handleClose"
                style="text-align: center;overflow: hidden;padding: 0;position:relative;"
            >
              <!--   上传组件开始   -->
              <h1>修改头像</h1>
              <el-upload
                  v-model:file-list="fileList"
                  drag
                  action='http://localhost:28000/upload/uploadImage'
                  name="file"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :headers="headers"
                  :limit="1"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>

              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
              <!--   上传组件结束   -->
            </el-dialog>
            <el-form-item label="昵称">
              <el-input placeholder="请输入昵称" v-model="user.nickName"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input :value="user.username" disabled=""></el-input>
            </el-form-item>
            <el-form-item label="个人简介">
              <el-input placeholder="请输入简介" v-model="user.description"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save()">保存修改</el-button>
            </el-form-item>
          </el-form>
      </el-col>
    </el-row>
  </div>



</template>

<script setup>
import {onMounted, ref} from 'vue'
import TokenAxios from "@/http/request/TokenAxios";
import router from "@/router";

const user = ref(getUser());


onMounted(()=>{
  console.log(user.value)
  TokenAxios.get('http://124.71.182.39:26000/user/'+user.value.id)
      .then((response)=>{
        if (response.state===20000){
          user.value=response.data;
        }
      })
})
const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const isUpdateCover = ref(false)

const loginInfo = ref(getUser());
const headers = {
  'Authorization': loginInfo.value.token
};

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  //服务器发出删除文件的请求
  //得到图片路径 (服务器删除图片需要路径) uploadFile.response= JsonResult
  // console.log(uploadFile.response.data);
  // let url = uploadFile.response.data;
  // tokenAxios.post(BASE_URL+'/v1/remove?url=' + url)
  //     .then((response) => {
  //       if (response.data.code === 20000) {
  //         console.log("服务器图片删除完成!");
  //       }
  //     })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
const handleSuccess = (response,uploadFile,uploadFiles)=>{
  // response=uploadFile.response=JsonResult
  user.value.avatar = response.data; //把上传成功的图片路径给到user对象
  isUpdateCover.value=false;
}
//点击保存的方法
const save = ()=>{
  //发出修改的请求
  TokenAxios.post('http://124.71.182.39:26000/user/info/update',user.value)
  .then((response)=>{
    if (response.state===20000){
      alert("修改成功!");
      //更新前端LocalStorage里面的数据
      localStorage.removeItem('loginInfo')
      //刷新页面
      router.push('/')
    }
  })
}



</script>

<style scoped>

</style>

